<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one {
      margin: 20px;
    }
  </style>
</head>

<body>
  <span class="one">123</span> <span>666</span>

  <script>

    function reactive(target) {
      if (target && typeof target === 'object') {
        Object.entries(target).forEach(([key, value]) => {
          if (typeof value === 'object') {
            target[key] = reactive(value)
          }
        }
        )

        return new Proxy(target, handle)
      }
    }

    const handle = {
      get(target, key, receiver) {
        if (key === '__v_isReactive') return true
        return Reflect.get(target, key, receiver)
      },

      set(target, key, value, receiver) {
        console.log('set', key, value)
        return Reflect.set(target, key, value, receiver)
      },

      deleteProperty(target, key) {
        console.log('delete', key)
        return Reflect.deleteProperty(target, key)
      }

    }

    function shallowReactive(target) {
      if (target && typeof target === 'object'); {
        return new Proxy(target.handle)
      }

    }

    const state = reactive({
      name: '张三',
      age: 18,
      info: {
        city: '北京',
        address: 'xxx'
      }
    })

    state.name = 1
    console.log(state);

    function readonly(target) {
      if (target && typeof target === 'object') {
        Object.entries(target).forEach(([key, value]) => {
          if (typeof value === 'object') {
            target[key] = readonly(value)
          }
        })

        return new Proxy(target, readonlyHandle)
      }
    }

    const readonlyHandle = {
      get(target, key, receiver) {
        if (key === '__v_isReadonly') return true
        return Reflect.get(target, key, receiver)
      },

      set(target, key, value, receiver) {
        console.error('set error')
        return true
      },
      deleteProperty(target, key) {
        console.error('delete error')
        return true
      }
    }


    function ref(target) {
      if (target && typeof target === 'object') {
        target = reactive(target)
      }

      return {
        _value: target,
        __v_isRef: true,
        __v_isShallow: false,
        _rawValue: target,

        get value() {
          console.log('get');
          return this._value
        },
        set value(newValue) {
          console.log('set');
          this._value = newValue
        }
      }
    }

    const obj = ref(1)
    console.log(obj);
    obj.value = 2
    console.log(obj.value);
  </script>
</body>

</html>